import React from 'react';
import { Card, Row, Col, Statistic, Typography, List, Tag, Progress } from 'antd';
import {
  FileTextOutlined,
  CalendarOutlined,
  CustomerServiceOutlined,
  TeamOutlined,
  PlayCircleOutlined,
  FireOutlined,
} from '@ant-design/icons';

const { Title, Paragraph } = Typography;

const Dashboard = () => {
  // 模拟数据
  const stats = [
    { title: '乐谱总数', value: 156, icon: <FileTextOutlined />, color: '#1890ff' },
    { title: '活动数量', value: 8, icon: <CalendarOutlined />, color: '#52c41a' },
    { title: '歌曲库', value: 89, icon: <CustomerServiceOutlined />, color: '#faad14' },
    { title: '乐队成员', value: 6, icon: <TeamOutlined />, color: '#722ed1' },
  ];

  const recentEvents = [
    { title: '周末演出', date: '2024-01-20', status: 'upcoming', songs: 5 },
    { title: '排练活动', date: '2024-01-18', status: 'completed', songs: 3 },
    { title: '音乐节', date: '2024-01-15', status: 'completed', songs: 8 },
  ];

  const popularSongs = [
    { name: '夜空中最亮的星', difficulty: '中等', practiceCount: 12 },
    { name: '海阔天空', difficulty: '困难', practiceCount: 8 },
    { name: '光辉岁月', difficulty: '中等', practiceCount: 10 },
  ];

  const getStatusTag = (status) => {
    const statusMap = {
      upcoming: { color: 'blue', text: '即将开始' },
      completed: { color: 'green', text: '已完成' },
      cancelled: { color: 'red', text: '已取消' },
    };
    const config = statusMap[status] || { color: 'default', text: '未知' };
    return <Tag color={config.color}>{config.text}</Tag>;
  };

  const getDifficultyTag = (difficulty) => {
    const colorMap = {
      '简单': 'green',
      '中等': 'orange',
      '困难': 'red',
    };
    return <Tag color={colorMap[difficulty]}>{difficulty}</Tag>;
  };

  return (
    <div>
      <Title level={2}>乐队管理系统</Title>
      <Paragraph>欢迎使用乐队管理系统，这里可以查看所有重要信息。</Paragraph>

      {/* 统计卡片 */}
      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        {stats.map((stat, index) => (
          <Col xs={24} sm={12} lg={6} key={index}>
            <Card>
              <Statistic
                title={stat.title}
                value={stat.value}
                prefix={React.cloneElement(stat.icon, { style: { color: stat.color } })}
                valueStyle={{ color: stat.color }}
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 主要内容区域 */}
      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        {/* 最近活动 */}
        <Col xs={24} lg={12}>
          <Card 
            title="最近活动" 
            extra={<CalendarOutlined />}
            style={{ height: '100%' }}
          >
            <List
              dataSource={recentEvents}
              renderItem={(item) => (
                <List.Item
                  actions={[getStatusTag(item.status)]}
                >
                  <List.Item.Meta
                    title={item.title}
                    description={`${item.date} | ${item.songs} 首歌曲`}
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>

        {/* 热门歌曲 */}
        <Col xs={24} lg={12}>
          <Card 
            title="热门歌曲" 
            extra={<FireOutlined />}
            style={{ height: '100%' }}
          >
            <List
              dataSource={popularSongs}
              renderItem={(item) => (
                <List.Item
                  actions={[getDifficultyTag(item.difficulty)]}
                >
                  <List.Item.Meta
                    title={item.name}
                    description={`练习次数: ${item.practiceCount}`}
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>

      {/* 排练进度 */}
      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        <Col xs={24}>
          <Card title="本周排练进度">
            <Row gutter={[16, 16]}>
              <Col xs={24} sm={8}>
                <div>
                  <Paragraph>总体进度</Paragraph>
                  <Progress percent={75} status="active" />
                </div>
              </Col>
              <Col xs={24} sm={8}>
                <div>
                  <Paragraph>新歌掌握</Paragraph>
                  <Progress percent={60} status="active" />
                </div>
              </Col>
              <Col xs={24} sm={8}>
                <div>
                  <Paragraph>配合默契度</Paragraph>
                  <Progress percent={85} status="active" />
                </div>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>

      {/* 快速操作 */}
      <Row gutter={[16, 16]} style={{ marginTop: 24 }}>
        <Col xs={24}>
          <Card title="快速操作">
            <Row gutter={[16, 16]}>
              <Col xs={24} sm={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <FileTextOutlined style={{ fontSize: 24, color: '#1890ff' }} />
                    <div style={{ marginTop: 8 }}>上传乐谱</div>
                  </div>
                </Card>
              </Col>
              <Col xs={24} sm={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <CalendarOutlined style={{ fontSize: 24, color: '#52c41a' }} />
                    <div style={{ marginTop: 8 }}>创建活动</div>
                  </div>
                </Card>
              </Col>
              <Col xs={24} sm={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <PlayCircleOutlined style={{ fontSize: 24, color: '#faad14' }} />
                    <div style={{ marginTop: 8 }}>记录排练</div>
                  </div>
                </Card>
              </Col>
              <Col xs={24} sm={6}>
                <Card size="small" hoverable>
                  <div style={{ textAlign: 'center' }}>
                    <TeamOutlined style={{ fontSize: 24, color: '#722ed1' }} />
                    <div style={{ marginTop: 8 }}>管理成员</div>
                  </div>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard; 